// 问题管理-问题列表
<template>
  <div class="h-100">
    <div class="tree-box moreLine" :style="{ paddingBottom: transferHeight.pb + 'px' }">
      <div>
        <span>设备所在辖区</span>
        <treesBox v-if="shuaxingTree" :treesBox="treesBox" @handleNodeClick="treeClick($event)"></treesBox>
      </div>
    </div>
    <div class="problemList">
      <div class="problem-R bg-f2" :style="{ minHeight: transferHeight.contentH + 'px' }">
        <el-row :gutter="15">
          <el-col :span="14">
            <div class="bg-f2 bg-fff" style="height: 530px">
              <el-row class="tiitleBox">
                <el-col :span="8">
                  <span class="tabulationTime">制表时间:{{ zbTime | dateFormat }}</span>
                </el-col>
                <el-col :span="8" align="center"><span class="title">报废资产统计</span></el-col>
                <el-col :span="8" align="right">
                  <el-link type="primary" icon="el-icon-download" :underline="false" :href="daochuUrl()" target="_blank">全部导出</el-link>
                  <el-link type="primary" class="p_l" icon="el-icon-download" :underline="false" :href="paginationExportBtn()" target="_blank">导出</el-link>
                </el-col>
              </el-row>
              <el-table
                :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '40px' }"
                ref="multipleTable_zc"
                :data="tableData"
                max-height="460px"
                style="width: 100%"
                border
                highlight-current-row
                @row-click="chaClick"
                v-loading="tableLoad"
                show-summary
                :summary-method="getSummaries"
              >
                <!-- 提示语句 -->
                <template slot="empty">{{ tableMessage }}</template>
                <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
                <el-table-column prop="MC" label="设备类型" min-width="140"></el-table-column>
                <el-table-column prop="SL" label="报废数量" min-width="140"></el-table-column>
              </el-table>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="bg-f2 bg-fff" style="height: 530px">
              <div style="color: #444444; font-size: 16px">报废资产统计</div>
              <echarts-load v-if="pieFlag || reload_pie" :chartFlag="pieFlag" :reload="reload_pie" @refreshF="refreshPie" />
              <zcfltj-bar v-else :barData="barData" />
            </div>
          </el-col>
        </el-row>
        <div class="bg-f2 bg-fff" style="margin-top: 15px">
          <el-table
            :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '40px' }"
            ref="multipleTable"
            :data="contractList"
            style="width: 100%"
            border
            stripe
            v-loading="tableLoad2"
          >
            <!-- 提示语句 -->
            <template slot="empty">{{ tableMessage2 }}</template>
            <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
            <el-table-column prop="zcmc" label="报废资产名称" show-overflow-tooltip></el-table-column>
            <el-table-column label="资产类型" prop="zclxmc" show-overflow-tooltip>
              <template slot-scope="scope">
                <div>
                  <span>{{ scope.row.zclxmc1 ? scope.row.zclxmc1 + ' / ' : '' }}</span>
                  <span>{{ scope.row.zclxmc2 ? scope.row.zclxmc2 + ' / ' : '' }}</span>
                  <span>{{ scope.row.zclxmc }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="安装地址" prop="ssjs" show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.sfmc + scope.row.csmc + scope.row.qxmc + scope.row.xzjdmc + scope.row.xxdz }}</template>
            </el-table-column>
            <el-table-column label="IP地址" prop="ip">
              <template slot-scope="scope">{{ scope.row.ip === 'null' ? '' : scope.row.ip }}</template>
            </el-table-column>
            <el-table-column prop="cjmc" label="所属厂家" show-overflow-tooltip min-width="100"></el-table-column>
            <el-table-column prop="bfjgmc" label="报废机构" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="bfyy" label="报废原因" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column label="报废时间" prop="bfsj" min-width="100">
              <template slot-scope="scope">{{ scope.row.bfsj | dateFormat }}</template>
            </el-table-column>
            <el-table-column label="操作人" prop="sprxm"></el-table-column>
            <el-table-column label="审批时间" prop="spsj" min-width="100">
              <template slot-scope="scope">{{ scope.row.spsj | dateFormat }}</template>
            </el-table-column>
          </el-table>
          <div class="fooer_box">
            <div></div>
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next"
              :total="countList"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ziC } from '@/utils/allUrl.js'
import { getUrl } from '@/utils/getUrl.js'
import treesBox from '@/components/treesBoxTow/index.vue'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
// tableMessageText
import echartsLoad from '@/components/Echarts/echartsLoad'
import { threeLevelH } from '@/assets/js/calcHeight'
import zcfltjBar from '@/components/Echarts/TJ/zcfltj'
export default {
  computed: {
    transferHeight() {
      // 计算屏幕滚动高度 - nav - 导航栏
      return {
        contentH: window.innerHeight - threeLevelH,
        pb: threeLevelH,
      }
    },
  },
  data() {
    return {
      treesBox: {
        // url: 'yonghu/selectYongHuXiaQuByWtjs',
        url: 'zcbb/selectZiChanBaoFeiXiaQuTongJi',
        //   GZKZ: false
      }, // tree图的请求地址
      shuaxingTree: true, // 刷新tree
      tableLoad: false, // 列表加载样式
      tableLoad2: false, // 列表加载样式
      tableMessage: '', // 加载的文字提示
      tableMessage2: '', // 加载详细文字提示
      currentPage: 1, // 页码
      pageSize: 10, // 页数
      countList: 0, // 总页数
      pieFlag: false, // 加载蒙层
      reload_pie: false, // 重新加载
      zbTime: 0, // 制表时间
      pieTimer: false, // 品牌定时器
      tableTimer: false, // 列表定时器
      baofeiID: '', // 报废资产名称
      xianQu: '', // 辖区
      nameDC: '', // 键名
      valueDC: '', // 值
      piliandaorumoban: ziC,
      // 报废详细信息
      contractList: [],
      // 列表数据
      tableData: [],
      // echaets 数据
      barData: {
        color: '#F56C6C',
        all: 0,
        charts: {},
      },
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.tableData = []
          this.tableMessage = tableMessageText
          // this.total = 0
        }
      }, timeLoad)
    },
    pieFlag(newVal, oldVal) {
      this.pieTimer = setTimeout(() => {
        if (this.pieFlag) {
          this.pieFlag = false
          this.reload_pie = true
        }
      }, timeLoad)
    },
    tableData() {
      this.$nextTick(function () {
        // 默认选中第一行
        this.$refs.multipleTable_zc.setCurrentRow(this.tableData[0])
      })
    },
  },
  created() {
    // 按钮权限
    // this.jurisdictionBtn()
    this.getList()
  },
  components: { treesBox, zcfltjBar, echartsLoad },
  methods: {
    // 获取按钮权限
    jurisdictionBtn() {
      const menus = JSON.parse(getUrl('jurisdiction'))
      menus.forEach((item) => {
        if (item.qxdm === 'YWZX_WTGL_WTLB') {
          item.children.forEach((item2) => {
            if (item2.qxdm === 'wtjs:updateWenTiJianSuo') {
              this.quanxianBtns.btn1 = true // 问题生成故障
            } else if (item2.qxdm === 'wtjs:insertWTBMD') {
              this.quanxianBtns.btn2 = true // 问题批量生成白名单
            } else if (item2.qxdm === 'wtjs:deleteMoreWenTiJianSuo') {
              this.quanxianBtns.btn3 = true // 问题批量删除
            }
          })
        }
      })
    },
    // tree形搜索
    treeClick(e) {
      this.xianQu = e.type
      if (e.type.levels === 1) {
        this.nameDC = 'SF'
        this.valueDC = e.type.label
      } else if (e.type.levels === 2) {
        this.nameDC = 'CS'
        this.valueDC = e.type.label
      } else if (e.type.levels === 3) {
        this.nameDC = 'QX'
        this.valueDC = e.type.label
      } else if (e.type.levels === 4) {
        this.nameDC = 'XZJD'
        this.valueDC = e.type.label
      }
      this.getList(e.type)
    },
    handleSizeChange(e) {
      this.currentPage = 1
      this.pageSize = e
      this.getXXList()
    },
    handleCurrentChange(e) {
      this.currentPage = e
      this.getXXList()
    },
    refreshPie() {
      this.reload_pie = false
    },
    // 获取数据
    async getList(val) {
      const params = new URLSearchParams()
      if (val) {
        if (val.levels === 1) {
          params.append('SF', val.label)
        } else if (val.levels === 2) {
          params.append('CS', val.label)
        } else if (val.levels === 3) {
          params.append('QX', val.label)
        } else if (val.levels === 4) {
          params.append('XZJD', val.label)
        }
      }
      this.tableLoad = true
      this.pieFlag = true
      const obj = {}
      let allBox = null
      const { data: res } = await this.$http.post(`${ziC}zcbb/ziChanBaoFeiTongJi`, params)
      if (res.code !== '0000') {
        this.tableMessage = res.message
      } else {
        this.tableData = res.data.list
        this.zbTime = res.data.time
        res.data.list.forEach((item) => {
          obj[item.MC] = item.SL
          allBox += Number(item.SL)
        })
        const fenleiList = {
          all: allBox,
          color: '#F56C6C',
          charts: obj,
        }
        this.barData = fenleiList
        clearTimeout(this.tableTimer)
        clearTimeout(this.pieTimer)
        this.tableLoad = false
        this.pieFlag = false
        this.baofeiID = res.data.list[0].MC
        this.getXXList()
      }
    },
    async chaClick(row) {
      this.tableLoad2 = true
      this.currentPage = 1
      this.pageSize = 10
      this.baofeiID = row.MC
      this.getXXList()
    },
    async getXXList() {
      const params = new URLSearchParams()
      if (this.xianQu) {
        if (this.xianQu.levels === 1) {
          params.append('SF', this.xianQu.label)
        } else if (this.xianQu.levels === 2) {
          params.append('CS', this.xianQu.label)
        } else if (this.xianQu.levels === 3) {
          params.append('QX', this.xianQu.label)
        } else if (this.xianQu.levels === 4) {
          params.append('XZJD', this.xianQu.label)
        }
      }
      params.append('userId', JSON.parse(getUrl('userconter')).id) // 当前用户ID
      params.append('TJLXMC', this.baofeiID)
      params.append('YHXQJY', 1)
      params.append('M_', this.currentPage) // 当前页
      params.append('N_', this.pageSize) // 每页显示行数
      const { data: res } = await this.$http.post(`${ziC}zcbf/list`, params)
      if (res.code !== '0000') {
        this.tableLoad2 = false
        this.contractList = []
        return (this.tableMessage2 = res.message)
      } else {
        this.tableLoad2 = false
        this.contractList = res.data.list
        this.countList = res.data.countList
      }
    },
    // 合记
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((item, index) => {
        if (index === 0) {
          sums[index] = ' '
          return
        }
        const values = data.map((item2) => Number(item2[item.property]))
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              //   if (index === columns.length - 1) {
              //     return '-'
              //   } else {

              //   }
              return prev + curr
            } else {
              return prev
            }
          }, 0)

          sums[columns.length - 1] += ' '
        } else {
          sums[index] = '合计'
        }
      })
      return sums
    },
    // 导出url
    daochuUrl() {
      // let obj = ''
      // if (this.xianQu) {
      //   obj = this.nameDC + '=' + this.valueDC
      // } else {
      //   obj = ''
      // }
      return this.piliandaorumoban + 'zcbb/ziChanBaoFeiTongJiExcel'
    },
    // 分页导出
    paginationExportBtn() {
      let obj = `TJLXMC=${this.baofeiID}`
      if (this.xianQu) {
        obj += '&' + this.nameDC + '=' + this.valueDC
        console.log(this.valueDC)
      }
      return this.piliandaorumoban + 'zcbb/ziChanBaoFeiTongJiExcel?' + obj
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/problemList.scss';
$c909399: #909399;
$c333333: #333333;
$c039D12: #039d12;
::v-deep .el-radio-button__inner {
  padding: 0 10px !important;
}
.tiitleBox {
  padding-bottom: 10px;
}
.tabulationTime {
  color: #7f7f7f;
}
.title {
  font-size: 16px;
  color: #333333;
}
.p_l {
  padding-left: 10px;
}
.fooer_box {
  height: 48px;
  line-height: 47px;
  padding: 0 15px;
  box-sizing: border-box;
  border-top: none;
  border: 1px solid #eaeaea;
  border-top: 0;
  display: flex;
  justify-content: space-between;
  .el-pagination {
    padding: 6px 5px;
  }
}
::v-deep .el-table__body tr.current-row > td {
  background-color: #69a8ea !important;
  color: #fff;
}
</style>
